<template>
    <div class="queue-container">
      <!-- 左边 -->
      <div class="queue-left">
        <!-- 排队大厅 name:'queue-list'  排队统计 queue-stat  设置queue-set  -->
        <el-tabs v-model="activeName" @tab-click="handleClick" class="el-tabs" v-show="consultActive == 'queue-list'">
          <!-- <el-tab-pane label="当前排队" name="first"> -->
            <div class="tab-quebgf">
              <div class="tab-queue">
                <div class="tab-queue-aicnet" style="">
                  <div class="tab-queue-top" v-if="historyShow==false">
                <div :class="{ 'top-item': true, active: tableActive == k }" v-for="(v, k) in queueTypeList" :key="k" @click="onChangeTab('table', k)">
                  {{ v.queueName }}({{ v.queueCount }})
                </div>
              </div>
              <div class="tab-queue-top" v-else></div>
              
              <!-- <div v-has-role="'queue-list-callHistory'" class="history-btn" v-if="historyShow == false" @click="historyChange">历史叫号</div> -->
              <div class="history-btn history-rutern" v-else @click="historyChange">返回</div>
                </div>
              <template v-if="historyShow==false">
                <div class="tab-queue-nav" v-if="saveStore.queFirst">
                <div class="nav-upper">
                  <div class="nav-upper-left">
                    <div class="left-nowPeo">正在叫号</div>
                    <div class="left-table">空闲：{{ saveStore.queFirst.idleCount }}桌</div>
                  </div>
                  <div class="nav-upper-right">
                    <div v-has-role="'queue-list-clear'" class="right-button" @click="showAll">缩小</div>
                    <div v-has-role="'queue-list-againPrint'" class="right-button" :class="{ active: printActive }" @click="printTip(saveStore.queFirst.code)">重打小票</div>
                    <div v-has-role="'queue-list-insert'" class="right-button" :class="{ active: jumpActive }" @click="queJump">插队</div>
                    <div v-has-role="'queue-list-clear'" class="right-button" @click="queListClear">排队清零</div>
                  </div>
                </div>
                <div class="nav-below">
                  <div class="nav-below-main" v-if="saveStore.queFirst.isUseTicket"></div>
                  <div class="below-value">{{ saveStore.queFirst.callNo }}</div>
                  <div class="below-center">
                    <div class="center-top">
                      <!-- <div class="people-num">{{ saveStore.queFirst.mobile?saveStore.queFirst.mobile:'--'}}</div> -->
                      <div class="people-num">（{{ saveStore.queFirst.peopleNum }}人<span v-if="saveStore.queFirst.sourceType == '2'"> |
                        </span><span v-if="saveStore.queFirst.sourceType == '1'" style="color: #00AAFF;">线上</span>）</div>
  
                      <div class="table-style">{{ saveStore.queFirst.tag ? saveStore.queFirst.tag : '无' }}</div>
                    </div>
                    <div class="center-bottom">
                      <div class="state">{{ saveStore.queFirst.waitTime }} | 叫号{{ saveStore.queFirst.callNum }}次</div>
                    </div>
                    <div class="center-footer"></div>
                  </div>
                  <div class="below-right" @click="queControl(saveStore.queFirst.code, $event)">
                    <div v-has-role="'queue-list-call'" class="below-button spe1" data-type="call">叫号</div>
                    <div v-has-role="'queue-list-seat'" class="below-button spe2" data-type="sit">入座</div>
                    <div v-has-role="'queue-list-over'" class="below-button spe3" data-type="pass">过号</div>
                  </div>
                  <audio :src="playIndex" style="width: 0; height: 0;" ref="audioBoxaa"></audio>
                </div>
                <div style="border-bottom: 1px solid #E6E6E6;margin-top: 19px;"></div>
              </div>
              <div class="tab-queue-main" v-if="saveStore.queList">
                <div class="queue-main-top">
                  <div class="top-left">排队列表</div>
                  <!-- <div class="top-right">
                    <div class="top-right-up" data-type="up" @click="quePageChange" v-show="queueListForm.pageIndex > 1">上一页
                    </div>
                    <div class="top-right-down" data-type="down" @click="quePageChange"
                      v-show="saveStore.queList.length >= 4">下一页</div>
                  </div> -->
                </div>
                <div class="queue-main-center">
                  <div class="center-item" v-for="(v, k) in saveStore.queList" :key="k">
                    <div class="item-number" :class="getStatusColor(k)">{{ v.indexNo }}</div>
                    <div class="nav-below">
                      <div class="nav-below-main" v-if="v.isUseTicket"></div>
                      <div class="below-value">{{ v.callNo }}</div>
                      <div class="below-center below-center_bf">
                        <div class="center-top">
                          <!-- <div class="people-num">{{v.mobile?v.mobile:'--'}}</div> -->
                          <div class="people-num">（{{ v.peopleNum }}人<span v-if="v.sourceType == '2'"> | </span><span
                              v-if="v.sourceType == '2'" style="color: #00AAFF;">线上</span> ）</div>
                          <div class="table-style">{{ v.tag ? v.tag : '无' }}</div>
                        </div>
                        <div class="center-bottom">
                          <div class="state">{{ v.waitTime }} | 叫号{{ v.callNum }}次</div>
                        </div>
                        <div class="center-footer"></div>
                      </div>
                      <div class="below-right" @click="queControl(v.code, $event)">
                        <div v-has-role="'queue-list-call'" class="below-button spe1" data-type="call">叫号</div>
                        <div v-has-role="'queue-list-seat'" class="below-button spe2" data-type="sit">入座</div>
                        <div v-has-role="'queue-list-over'" class="below-button spe3" data-type="pass">过号</div>
                      </div>
                      <div class="below-radio" v-show="isShowRadio">
                        <el-radio v-model="controlCode" :label="v.code" @change="onChangeRadio(v)"></el-radio>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              </template>
               <template v-else>
  
          <!-- </el-tab-pane> -->
          <!-- <el-tab-pane label="历史记录" name="second"> -->
            <div class="tab-record">
              <div class="tab-record-top">
                <div class="tab-record-data">
                  <div class="data-title">选择日期：&nbsp;</div>
                  <div class="ke_date-picker">
                    <el-date-picker  v-model="queueRecordListForm.selectedDate" type="date" placeholder="年/月/日"
                    @change="selectedDateChange"></el-date-picker>
                  </div>
              
                    <div class="action-btn-box">
                      <el-button type="primary" @click="handleSearch">查询</el-button>
                    </div>
                </div>
                <div class="tab-record-btn" @click="recordsPageChange">
                  <div class="btn-up" data-type="up">上一页</div>
                  <div class="btn-down" data-type="down">下一页</div>
                </div>
              </div>
              <div class="tab-record-main">
                <div class="center-item" v-for="(v, k) in queueRecordList" :key="k">
                  <div class="item-number">{{ k + 1 }}</div>
                  <div class="nav-below">
                    <div style="display: flex;align-items: center">
                      <div class="below-value" style="padding-right: 19px;">{{ v.callNo }}</div>
                      <div class="below-center" style="background: #EBEBEB;">
                        <div class="center-top" v-if="v.stateDesc == '排队中'">
                          <div class="people-num">（{{ v.peopleNum }}人）</div>
                          <div class="table-style">{{ v.remark }}</div>
                        </div>
                        <div class="center-top" v-if="v.stateDesc == '已入座'">
                          <div class="people-num" style="color: #666666;">已就餐</div>
  
                        </div>
                        <div class="center-top" v-if="v.stateDesc == '已过号'">
                          <div class="people-num" style="color: #FF3333;">已过号</div>
                        </div>
                        <div class="center-bottom">
                          <div class="state">{{ v.waitTime }} | 叫号{{ v.callNum }}次</div>
                        </div>
                        <div class="center-footer"></div>
                      </div>
                    </div>
                    <div class="below-right" @click="recordsOperation(v.code, $event)">
                      <div class="below-button spe2" style="background: #FF6A00;color: #fff;" 
                        data-type="reLine">重排</div>
                      <div class="below-button spe3" data-type="black" v-if="v.mobile">加黑名单</div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
  
          <!-- </el-tab-pane> -->
               </template>
            </div>
            </div>
         
        </el-tabs>
        <el-tabs v-model="activeName2" @tab-click="queueSummaryChange" class="el-tabs spe" v-show="consultActive == 'queue-stat'">
          <el-tab-pane label="今日" name="first">
            <div class="tab-last">
              <div class="tab-last-top">
                <div class="top-left">
                  <div class="left-title">取号：<span style="color: #FF6A00;font-weight: bold;">{{ queueSummary.queueCount
                  }}</span></div>
                  <div class="left-title">就餐：<span style="color: #FF6A00;font-weight: bold;">{{ queueSummary.seatCount
                  }}</span></div>
                </div>
                <div class="top-right">
                  <div class="">
                    {{ dayjs(queueSummaryForm.beginTime).format('YYYY.MM.DD HH:mm:ss') }}-{{ dayjs(queueSummaryForm.endTime).format('YYYY.MM.DD HH:mm:ss') }}
                  </div>
                </div>
              </div>
              <div class="tab-last-main">
                <div class="main-title">
                  <div class="main-title-item">桌型</div>
                  <div class="main-title-item">取号数</div>
                  <div class="main-title-item">就餐数</div>
                  <div class="main-title-item">就餐率</div>
                  <div class="main-title-item">等位时长</div>
                </div>
                <div class="main-value">
                  <div class="main-value-item" v-for="(v, k) in queueSummary.lsit" :key="k" :class="{ 'odd': k % 2 == 0 }">
                    <div class="item">{{ v.queueName }}</div>
                    <div class="item">{{ v.queueCount }}</div>
                    <div class="item">{{ v.seatCount }}</div>
                    <div class="item">{{ v.seatRate }}</div>
                    <div class="item">{{ v.avgWaitDuration }}</div>
                  </div>
                </div>
              </div>
            </div>
          </el-tab-pane>
          <el-tab-pane label="昨日" name="second">
            <div class="tab-last">
              <div class="tab-last-top">
                <div class="top-left">
                  <div class="left-title">取号：<span style="color: #FF6A00;font-weight: bold;">{{ queueSummary.queueCount
                  }}</span></div>
                  <div class="left-title">就餐：<span style="color: #FF6A00;font-weight: bold;">{{ queueSummary.seatCount
                  }}</span></div>
                </div>
                <div class="top-right">
                  <div class="">
                    {{ dayjs(queueSummaryForm.beginTime).format('YYYY.MM.DD HH:mm:ss') }}-{{ dayjs(queueSummaryForm.endTime).format('YYYY.MM.DD HH:mm:ss') }}
                  </div>
                </div>
              </div>
              <div class="tab-last-main">
                <div class="main-title">
                  <div class="main-title-item">桌型</div>
                  <div class="main-title-item">取号数</div>
                  <div class="main-title-item">就餐数</div>
                  <div class="main-title-item">就餐率</div>
                  <div class="main-title-item">等位时长</div>
                </div>
                <div class="main-value">
                  <div class="main-value-item" v-for="(v, k) in queueSummary.lsit" :key="k" :class="{ 'odd': k % 2 == 0 }">
                    <div class="item">{{ v.queueName }}</div>
                    <div class="item">{{ v.queueCount }}</div>
                    <div class="item">{{ v.seatCount }}</div>
                    <div class="item">{{ v.seatRate }}</div>
                    <div class="item">{{ v.avgWaitDuration }}</div>
                  </div>
                </div>
              </div>
            </div>
          </el-tab-pane>
          <el-tab-pane label="本周" name="third">
            <div class="tab-last">
              <div class="tab-last-top">
                <div class="top-left">
                  <div class="left-title">取号：<span style="color: #FF6A00;font-weight: bold;">{{ queueSummary.queueCount }}</span></div>
                  <div class="left-title">就餐：<span style="color: #FF6A00;font-weight: bold;">{{ queueSummary.seatCount }}</span></div>
                </div>
                <div class="top-right">
                  <div class="">
                    {{ dayjs(queueSummaryForm.beginTime).format('YYYY.MM.DD HH:mm:ss') }}-{{ dayjs(queueSummaryForm.endTime).format('YYYY.MM.DD HH:mm:ss') }}
                  </div>
                </div>
              </div>
              <div class="tab-last-main">
                <div class="main-title">
                  <div class="main-title-item">桌型</div>
                  <div class="main-title-item">取号数</div>
                  <div class="main-title-item">就餐数</div>
                  <div class="main-title-item">就餐率</div>
                  <div class="main-title-item">等位时长</div>
                </div>
                <div class="main-value">
                  <div class="main-value-item" v-for="(v, k) in queueSummary.lsit" :key="k" :class="{ 'odd': k % 2 == 0 }">
                    <div class="item">{{ v.queueName }}</div>
                    <div class="item">{{ v.queueCount }}</div>
                    <div class="item">{{ v.seatCount }}</div>
                    <div class="item">{{ v.seatRate }}</div>
                    <div class="item">{{ v.avgWaitDuration }}</div>
                  </div>
                </div>
              </div>
            </div>
          </el-tab-pane>
          <el-tab-pane label="本月" name="four">
            <div class="tab-last">
              <div class="tab-last-top">
                <div class="top-left">
                  <div class="left-title">取号：<span style="color: #FF6A00;font-weight: bold;">{{ queueSummary.queueCount
                  }}</span></div>
                  <div class="left-title">就餐：<span style="color: #FF6A00;font-weight: bold;">{{ queueSummary.seatCount
                  }}</span></div>
                </div>
                <div class="top-right">
                  <div class="">
                    {{ dayjs(queueSummaryForm.beginTime).format('YYYY.MM.DD HH:mm:ss') }}-{{ dayjs(queueSummaryForm.endTime).format('YYYY.MM.DD HH:mm:ss') }}
                  </div>
                </div>
              </div>
              <div class="tab-last-main">
                <div class="main-title">
                  <div class="main-title-item">桌型</div>
                  <div class="main-title-item">取号数</div>
                  <div class="main-title-item">就餐数</div>
                  <div class="main-title-item">就餐率</div>
                  <div class="main-title-item">等位时长</div>
                </div>
                <div class="main-value">
                  <div class="main-value-item" v-for="(v, k) in queueSummary.lsit" :key="k" :class="{ 'odd': k % 2 == 0 }">
                    <div class="item">{{ v.queueName }}</div>
                    <div class="item">{{ v.queueCount }}</div>
                    <div class="item">{{ v.seatCount }}</div>
                    <div class="item">{{ v.seatRate }}</div>
                    <div class="item">{{ v.avgWaitDuration }}</div>
                  </div>
                </div>
              </div>
            </div>
          </el-tab-pane>
        </el-tabs>
        <div class="queue-left-setup" v-show="consultActive == 'queue-set'">
          <div class="setup-top">
            叫号设置
          </div>
          <div class="setup-main">
            <div class="setup-main-item">
              <div class="item-left">线上（小程序）取号</div>
              <div class="item-center"></div>
              <div class="item-take">
                <el-switch v-model="isMiniQueue" active-color="#ff6a00" inactive-color="#ff6a00"
                  @change='miniQueueChange'></el-switch>
                <div class="right-take-title">关闭后小程序不可取号</div>
                <!-- <el-switch v-model="setupForm.callMode" active-color="#ff6a00" inactive-color="#ff6a00"></el-switch> -->
              </div>
              <div class="item-distance"><el-input  v-model="setupForm.limitKM" placeholder="" type="number"  @input="distanceChange"></el-input>  km内可以取号，不填则不限制</div>
            </div>
            <div class="setup-main-item">
              <div class="item-left">恶意取号惩罚</div>
              <div class="item-center"></div>
              <div class="item-distance"> 
                <el-input  v-model="setupForm.inHour" placeholder="" type="number"></el-input>  
                小时内，客户取消排队
                <el-input  v-model="setupForm.cancelNum" placeholder="" type="number"></el-input>  
                次，当前客户取号锁定
                <el-input  v-model="setupForm.lockHour" placeholder="" type="number"></el-input>  
                小时 
              </div>
            </div>
            <div class="setup-main-item">
              <div class="item-left">叫号类型标识呼叫次数</div>
              <div class="item-center"></div>
              <div class="item-right">
                <el-radio v-model="setupForm.callNum" label="1">一次</el-radio>
                <el-radio v-model="setupForm.callNum" label="2">二次</el-radio>
                <el-radio v-model="setupForm.callNum" label="3">三次</el-radio>
              </div>
            </div>
            <div class="setup-main-item">
              <div class="item-left">叫号语音</div>
              <div class="item-center"></div>
              <div class="item-right">
                <el-radio v-model="setupForm.voiceType" label="0" @change="voiceTypeFun('0')">默认语音</el-radio>
                <el-radio v-model="setupForm.voiceType" label="1" @change="voiceTypeFun('1')">自定义语音</el-radio>
              </div>
            </div>
            <!-- <div class="setup-main-item">
              <div class="item-left">测试叫号语音</div>
              <div class="item-center"></div>
              <div class="item-right">
                <el-radio v-model="setupForm.voiceType" label="0">A</el-radio>
                <el-radio v-model="setupForm.voiceType" label="1">B</el-radio>
                <el-radio v-model="setupForm.voiceType" label="2">C</el-radio>
                <el-radio v-model="setupForm.voiceType" label="3">D</el-radio>
                <el-radio v-model="setupForm.voiceType" label="4">E</el-radio>
              </div>
            </div> -->
            <div class="setup-main-item" style="padding-bottom: 10px;">
              <div class="item-left">提示语</div>
              <div class="item-center"></div>
              <div class="item-pick">
                <el-select v-model="speechStart" @change="speechStartUrl">
                  <el-option v-for="item in speechList" :key="item.value" :label="item.name"
                    :value="item.fileName"></el-option>
                </el-select>
              </div>
            </div>
            <div class="setup-main-item" style="padding-bottom: 10px;">
              <div class="item-left">基础语</div>
              <div class="item-center"></div>
              <div class="item-pick">
                <el-select v-model="speechMid" @change="speechMidUrl">
                  <el-option v-for="item in voiceTypeList" :key="item.value" :label="item.name"
                    :value="item.value"></el-option>
                </el-select>
              </div>
            </div>
            <div class="setup-main-item" style="padding-bottom: 10px;">
              <div class="item-left">结束语</div>
              <div class="item-center"></div>
              <div class="item-pick">
                <el-select v-model="speechEnd" @change="speechEndUrl">
                  <el-option v-for="item in speechList" :key="item.value" :label="item.name"
                    :value="item.fileName"></el-option>
                </el-select>
              </div>
            </div>
            <!-- <div class="setup-main-item" style="padding-bottom: 0px;">
              <div class="item-left">结束语</div>
              <div class="item-center"></div>
              <div class="item-pick">
                <el-select v-model="setupForm.endPrompt" placeholder="请选择">
                  <el-option
                    v-for="item in options1"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  >
                  </el-option>
                </el-select>
              </div>
            </div> -->
            <div class="setup-main-footer">
              <div class="footer-btn-back" @click="consultActive = 'queue-list'">返回</div>
              <div v-has-role="'queue-set-save'" class="footer-btn-save" @click='changeSet'>保存</div>
            </div>
          </div>
          <div class="setup-footer" style="margin-top: 4px;">
            <div class="footer-title">其他</div>
            <div class="footer-value">
              <div :class="{ 'footer-value-tab': true, active: setupTabActive == k }" v-for="(vItem, k) in setupTabList" :key="k" @click="onChangeTab('setup', k)" v-has-role="vItem.role" >
                {{ vItem.title }}
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="queue-left spe">
        <!-- 排队大厅 name:'queue-list'  排队统计 queue-stat  设置queue-set  -->
        <el-tabs v-model="activeName" @tab-click="handleClick" class="el-tabs" v-show="consultActive == 'queue-list'">
          <!-- <el-tab-pane label="当前排队" name="first"> -->
            <div class="tab-quebgf">
              <div class="tab-queue">
              
              <template v-if="historyShow==false">
                
              <div class="tab-queue-main spe" v-if="queueListOtherAll">
                <div class="queue-main-center">
                  <div class="center-item spe" v-for="(v, k) in queueListOtherAll" :key="k">
                    <div class="item-number" :class="getStatusColor(k)">{{ v.indexNo }}</div>
                    <div class="nav-below">
                      <div class="nav-below-main" v-if="v.isUseTicket"></div>
                      <div class="below-value">{{ v.callNo }}</div>
                      <div class="below-center below-center_bf">
                        <div class="center-top">
                          <!-- <div class="people-num">{{v.mobile?v.mobile:'--'}}</div> -->
                          <div class="people-num">（{{ v.peopleNum }}人<span v-if="v.sourceType == '2'"> | </span><span
                              v-if="v.sourceType == '2'" style="color: #00AAFF;">线上</span> ）</div>
                          <div class="table-style">{{ v.tag ? v.tag : '无' }}</div>
                        </div>
                        <div class="center-bottom">
                          <div class="state">{{ v.waitTime }} | 叫号{{ v.callNum }}次</div>
                        </div>
                        <div class="center-footer"></div>
                      </div>
                      <div class="below-right" @click="queControl(v.code, $event)">
                        <div v-has-role="'queue-list-call'" class="below-button spe1" data-type="call">叫号</div>
                        <div v-has-role="'queue-list-seat'" class="below-button spe2" data-type="sit">入座</div>
                        <div v-has-role="'queue-list-over'" class="below-button spe3" data-type="pass">过号</div>
                      </div>
                      <div class="below-radio" v-show="isShowRadio">
                        <el-radio v-model="controlCode" :label="v.code" @change="onChangeRadio(v)"></el-radio>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="queue-main-top spe">
                  <div class="top-left">第{{queueListForm.pageIndex}}页</div>
                  <div class="top-right">
                    <div class="top-right-up spe" data-type="up" @click="quePageChange" v-show="queueListForm.pageIndex > 1">上一页
                    </div>
                    <div class="top-right-down spe" data-type="down" @click="quePageChange"
                      v-show="saveStore.queList.length >= 4">下一页</div>
                  </div>
                </div>
              </div>
          
              </template>
               <template v-else>
  
          <!-- </el-tab-pane> -->
          <!-- <el-tab-pane label="历史记录" name="second"> -->
            <div class="tab-record">
              <div class="tab-record-top">
                <div class="tab-record-data">
                  <div class="data-title">选择日期：&nbsp;</div>
                  <div class="ke_date-picker">
                    <el-date-picker  v-model="queueRecordListForm.selectedDate" type="date" placeholder="年/月/日"
                    @change="selectedDateChange"></el-date-picker>
                  </div>
              
                    <div class="action-btn-box">
                      <el-button type="primary" @click="handleSearch">查询</el-button>
                    </div>
                </div>
                <div class="tab-record-btn" @click="recordsPageChange">
                  <div class="btn-up" data-type="up">上一页</div>
                  <div class="btn-down" data-type="down">下一页</div>
                </div>
              </div>
              <div class="tab-record-main">
                <div class="center-item spe" v-for="(v, k) in queueRecordList" :key="k">
                  <div class="item-number">{{ k + 1 }}</div>
                  <div class="nav-below">
                    <div style="display: flex;align-items: center">
                      <div class="below-value" style="padding-right: 19px;">{{ v.callNo }}</div>
                      <div class="below-center" style="background: #EBEBEB;">
                        <div class="center-top" v-if="v.stateDesc == '排队中'">
                          <div class="people-num">（{{ v.peopleNum }}人）</div>
                          <div class="table-style">{{ v.remark }}</div>
                        </div>
                        <div class="center-top" v-if="v.stateDesc == '已入座'">
                          <div class="people-num" style="color: #666666;">已就餐</div>
  
                        </div>
                        <div class="center-top" v-if="v.stateDesc == '已过号'">
                          <div class="people-num" style="color: #FF3333;">已过号</div>
                        </div>
                        <div class="center-bottom">
                          <div class="state">{{ v.waitTime }} | 叫号{{ v.callNum }}次</div>
                        </div>
                        <div class="center-footer"></div>
                      </div>
                    </div>
                    <div class="below-right" @click="recordsOperation(v.code, $event)">
                      <div class="below-button spe2" style="background: #FF6A00;color: #fff;" 
                        data-type="reLine">重排</div>
                      <div class="below-button spe3" data-type="black" v-if="v.mobile">加黑名单</div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
  
          <!-- </el-tab-pane> -->
               </template>
            </div>
            </div>
         
        </el-tabs>
        <el-tabs v-model="activeName2" @tab-click="queueSummaryChange" class="el-tabs spe" v-show="consultActive == 'queue-stat'">
          <el-tab-pane label="今日" name="first">
            <div class="tab-last">
              <div class="tab-last-top">
                <div class="top-left">
                  <div class="left-title">取号：<span style="color: #FF6A00;font-weight: bold;">{{ queueSummary.queueCount
                  }}</span></div>
                  <div class="left-title">就餐：<span style="color: #FF6A00;font-weight: bold;">{{ queueSummary.seatCount
                  }}</span></div>
                </div>
                <div class="top-right">
                  <div class="">
                    {{ dayjs(queueSummaryForm.beginTime).format('YYYY.MM.DD HH:mm:ss') }}-{{ dayjs(queueSummaryForm.endTime).format('YYYY.MM.DD HH:mm:ss') }}
                  </div>
                </div>
              </div>
              <div class="tab-last-main">
                <div class="main-title">
                  <div class="main-title-item">桌型</div>
                  <div class="main-title-item">取号数</div>
                  <div class="main-title-item">就餐数</div>
                  <div class="main-title-item">就餐率</div>
                  <div class="main-title-item">等位时长</div>
                </div>
                <div class="main-value">
                  <div class="main-value-item" v-for="(v, k) in queueSummary.lsit" :key="k" :class="{ 'odd': k % 2 == 0 }">
                    <div class="item">{{ v.queueName }}</div>
                    <div class="item">{{ v.queueCount }}</div>
                    <div class="item">{{ v.seatCount }}</div>
                    <div class="item">{{ v.seatRate }}</div>
                    <div class="item">{{ v.avgWaitDuration }}</div>
                  </div>
                </div>
              </div>
            </div>
          </el-tab-pane>
          <el-tab-pane label="昨日" name="second">
            <div class="tab-last">
              <div class="tab-last-top">
                <div class="top-left">
                  <div class="left-title">取号：<span style="color: #FF6A00;font-weight: bold;">{{ queueSummary.queueCount
                  }}</span></div>
                  <div class="left-title">就餐：<span style="color: #FF6A00;font-weight: bold;">{{ queueSummary.seatCount
                  }}</span></div>
                </div>
                <div class="top-right">
                  <div class="">
                    {{ dayjs(queueSummaryForm.beginTime).format('YYYY.MM.DD HH:mm:ss') }}-{{ dayjs(queueSummaryForm.endTime).format('YYYY.MM.DD HH:mm:ss') }}
                  </div>
                </div>
              </div>
              <div class="tab-last-main">
                <div class="main-title">
                  <div class="main-title-item">桌型</div>
                  <div class="main-title-item">取号数</div>
                  <div class="main-title-item">就餐数</div>
                  <div class="main-title-item">就餐率</div>
                  <div class="main-title-item">等位时长</div>
                </div>
                <div class="main-value">
                  <div class="main-value-item" v-for="(v, k) in queueSummary.lsit" :key="k" :class="{ 'odd': k % 2 == 0 }">
                    <div class="item">{{ v.queueName }}</div>
                    <div class="item">{{ v.queueCount }}</div>
                    <div class="item">{{ v.seatCount }}</div>
                    <div class="item">{{ v.seatRate }}</div>
                    <div class="item">{{ v.avgWaitDuration }}</div>
                  </div>
                </div>
              </div>
            </div>
          </el-tab-pane>
          <el-tab-pane label="本周" name="third">
            <div class="tab-last">
              <div class="tab-last-top">
                <div class="top-left">
                  <div class="left-title">取号：<span style="color: #FF6A00;font-weight: bold;">{{ queueSummary.queueCount }}</span></div>
                  <div class="left-title">就餐：<span style="color: #FF6A00;font-weight: bold;">{{ queueSummary.seatCount }}</span></div>
                </div>
                <div class="top-right">
                  <div class="">
                    {{ dayjs(queueSummaryForm.beginTime).format('YYYY.MM.DD HH:mm:ss') }}-{{ dayjs(queueSummaryForm.endTime).format('YYYY.MM.DD HH:mm:ss') }}
                  </div>
                </div>
              </div>
              <div class="tab-last-main">
                <div class="main-title">
                  <div class="main-title-item">桌型</div>
                  <div class="main-title-item">取号数</div>
                  <div class="main-title-item">就餐数</div>
                  <div class="main-title-item">就餐率</div>
                  <div class="main-title-item">等位时长</div>
                </div>
                <div class="main-value">
                  <div class="main-value-item" v-for="(v, k) in queueSummary.lsit" :key="k" :class="{ 'odd': k % 2 == 0 }">
                    <div class="item">{{ v.queueName }}</div>
                    <div class="item">{{ v.queueCount }}</div>
                    <div class="item">{{ v.seatCount }}</div>
                    <div class="item">{{ v.seatRate }}</div>
                    <div class="item">{{ v.avgWaitDuration }}</div>
                  </div>
                </div>
              </div>
            </div>
          </el-tab-pane>
          <el-tab-pane label="本月" name="four">
            <div class="tab-last">
              <div class="tab-last-top">
                <div class="top-left">
                  <div class="left-title">取号：<span style="color: #FF6A00;font-weight: bold;">{{ queueSummary.queueCount
                  }}</span></div>
                  <div class="left-title">就餐：<span style="color: #FF6A00;font-weight: bold;">{{ queueSummary.seatCount
                  }}</span></div>
                </div>
                <div class="top-right">
                  <div class="">
                    {{ dayjs(queueSummaryForm.beginTime).format('YYYY.MM.DD HH:mm:ss') }}-{{ dayjs(queueSummaryForm.endTime).format('YYYY.MM.DD HH:mm:ss') }}
                  </div>
                </div>
              </div>
              <div class="tab-last-main">
                <div class="main-title">
                  <div class="main-title-item">桌型</div>
                  <div class="main-title-item">取号数</div>
                  <div class="main-title-item">就餐数</div>
                  <div class="main-title-item">就餐率</div>
                  <div class="main-title-item">等位时长</div>
                </div>
                <div class="main-value">
                  <div class="main-value-item" v-for="(v, k) in queueSummary.lsit" :key="k" :class="{ 'odd': k % 2 == 0 }">
                    <div class="item">{{ v.queueName }}</div>
                    <div class="item">{{ v.queueCount }}</div>
                    <div class="item">{{ v.seatCount }}</div>
                    <div class="item">{{ v.seatRate }}</div>
                    <div class="item">{{ v.avgWaitDuration }}</div>
                  </div>
                </div>
              </div>
            </div>
          </el-tab-pane>
        </el-tabs>
        <div class="queue-left-setup" v-show="consultActive == 'queue-set'">
          <div class="setup-top">
            叫号设置
          </div>
          <div class="setup-main">
            <div class="setup-main-item">
              <div class="item-left">线上（小程序）取号</div>
              <div class="item-center"></div>
              <div class="item-take">
                <el-switch v-model="isMiniQueue" active-color="#ff6a00" inactive-color="#ff6a00"
                  @change='miniQueueChange'></el-switch>
                <div class="right-take-title">关闭后小程序不可取号</div>
                <!-- <el-switch v-model="setupForm.callMode" active-color="#ff6a00" inactive-color="#ff6a00"></el-switch> -->
              </div>
              <div class="item-distance"><el-input  v-model="setupForm.limitKM" placeholder="" type="number"  @input="distanceChange"></el-input>  km内可以取号，不填则不限制</div>
            </div>
            <div class="setup-main-item">
              <div class="item-left">恶意取号惩罚</div>
              <div class="item-center"></div>
              <div class="item-distance"> 
                <el-input  v-model="setupForm.inHour" placeholder="" type="number"></el-input>  
                小时内，客户取消排队
                <el-input  v-model="setupForm.cancelNum" placeholder="" type="number"></el-input>  
                次，当前客户取号锁定
                <el-input  v-model="setupForm.lockHour" placeholder="" type="number"></el-input>  
                小时 
              </div>
            </div>
            <div class="setup-main-item">
              <div class="item-left">叫号类型标识呼叫次数</div>
              <div class="item-center"></div>
              <div class="item-right">
                <el-radio v-model="setupForm.callNum" label="1">一次</el-radio>
                <el-radio v-model="setupForm.callNum" label="2">二次</el-radio>
                <el-radio v-model="setupForm.callNum" label="3">三次</el-radio>
              </div>
            </div>
            <div class="setup-main-item">
              <div class="item-left">叫号语音</div>
              <div class="item-center"></div>
              <div class="item-right">
                <el-radio v-model="setupForm.voiceType" label="0" @change="voiceTypeFun('0')">默认语音</el-radio>
                <el-radio v-model="setupForm.voiceType" label="1" @change="voiceTypeFun('1')">自定义语音</el-radio>
              </div>
            </div>
            <!-- <div class="setup-main-item">
              <div class="item-left">测试叫号语音</div>
              <div class="item-center"></div>
              <div class="item-right">
                <el-radio v-model="setupForm.voiceType" label="0">A</el-radio>
                <el-radio v-model="setupForm.voiceType" label="1">B</el-radio>
                <el-radio v-model="setupForm.voiceType" label="2">C</el-radio>
                <el-radio v-model="setupForm.voiceType" label="3">D</el-radio>
                <el-radio v-model="setupForm.voiceType" label="4">E</el-radio>
              </div>
            </div> -->
            <div class="setup-main-item" style="padding-bottom: 10px;">
              <div class="item-left">提示语</div>
              <div class="item-center"></div>
              <div class="item-pick">
                <el-select v-model="speechStart" @change="speechStartUrl">
                  <el-option v-for="item in speechList" :key="item.value" :label="item.name"
                    :value="item.fileName"></el-option>
                </el-select>
              </div>
            </div>
            <div class="setup-main-item" style="padding-bottom: 10px;">
              <div class="item-left">基础语</div>
              <div class="item-center"></div>
              <div class="item-pick">
                <el-select v-model="speechMid" @change="speechMidUrl">
                  <el-option v-for="item in voiceTypeList" :key="item.value" :label="item.name"
                    :value="item.value"></el-option>
                </el-select>
              </div>
            </div>
            <div class="setup-main-item" style="padding-bottom: 10px;">
              <div class="item-left">结束语</div>
              <div class="item-center"></div>
              <div class="item-pick">
                <el-select v-model="speechEnd" @change="speechEndUrl">
                  <el-option v-for="item in speechList" :key="item.value" :label="item.name"
                    :value="item.fileName"></el-option>
                </el-select>
              </div>
            </div>
            <!-- <div class="setup-main-item" style="padding-bottom: 0px;">
              <div class="item-left">结束语</div>
              <div class="item-center"></div>
              <div class="item-pick">
                <el-select v-model="setupForm.endPrompt" placeholder="请选择">
                  <el-option
                    v-for="item in options1"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  >
                  </el-option>
                </el-select>
              </div>
            </div> -->
            <div class="setup-main-footer">
              <div class="footer-btn-back" @click="consultActive = 'queue-list'">返回</div>
              <div v-has-role="'queue-set-save'" class="footer-btn-save" @click='changeSet'>保存</div>
            </div>
          </div>
          <div class="setup-footer" style="margin-top: 4px;">
            <div class="footer-title">其他</div>
            <div class="footer-value">
              <div :class="{ 'footer-value-tab': true, active: setupTabActive == k }" v-for="(vItem, k) in setupTabList" :key="k" @click="onChangeTab('setup', k)" v-has-role="vItem.role" >
                {{ vItem.title }}
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div id="audioBox"></div>
    <ZDialog v-model="confirmShow" width="60%" title="提示" content="确定要排队清零吗？" @cancel="confirmShow = false"
      @confirm="confirmClear()"></ZDialog>
    <QueDialog v-model="onConfirmShow" width="30%" title="补打小票" :content="printName" @cancel="clearForm()"
      @confirm="queueRePrintReceipts()"></QueDialog>
    <el-dialog :show-close="false" width="30%" v-model="onJumpShow">
      <div class="confirmPopue">
        <div class="confirmPopue-title">插队</div>
        <div class="confirmPopue-center">将 <span style="color:#FF6A00">{{ printName }}</span> （当前排队号：<span
            style="color:#FF3333">第{{ nowIndex }}位</span>）</div>
        <div class="confirmPopue-input">
          <div class="confirmPopue-input-title">移动到第位</div>
          <input type="text" class="confirmPopue-input-value" v-model="jumpForm.jumpIndex">
          <div class="confirmPopue-input-icon">位</div>
        </div>
        <div class="popup-btn">
          <div class="btn-cancle" @click="clearForm()">取消</div>
          <div class="btn-submit" @click="onConfirmJump">确认</div>
        </div>
      </div>
    </el-dialog>
    <Send ref="SendRef" :visible="SendVisible" @emitCancel="emitSendCancel"
      @emitSubmit="emitSendSubmit" />
  </template>
  
  <script setup>
  import Api from '@/api'
  import dayjs from "dayjs"
  import ls from '@/lib/ls'
  import { ElNotification } from 'element-plus'
  import { validateMobile } from '@/lib/util.js'
  import ZDialog from '@/components/Dialog/Dialog.vue'
  import { getLocalIPv4 } from "@/utils/getip.js";
  import QueDialog from "@/views/workbench/queue/index/QueDialog.vue";
  import Send from '@/views/workbench/member/components/send.vue'
  import { transformWorkTime } from '@/utils/chenhao.js'
  import useSaveStore from '@/store/save' 
  import useConfigStore from '@/store/config'  
  import { ref } from 'vue'
  const router = useRouter()
  const configStore = useConfigStore()
  const orgStartTime = configStore.shopInfo.orgReportStartTime //orgStartTime
  const orgEndTime = configStore.shopInfo.orgReportEndTime //orgEndTime
  
  const saveStore = useSaveStore()
  // const orgCode = ref(ls.get("USER_INFO") ? ls.get("USER_INFO").orgCode : "");
  watch(saveStore.queState,(newValue,oldValue)=>{
    GetQueueList()
  })

const showAll = ()=>{
    router.back()
}

  // ---------------------------------------------- tab切换 ---------------------------------------------------
  const speechStart = ref('请选择')
  const speechMid = ref('请选择')
  const speechEnd = ref('请选择')
  
  const beijingTime = ref('')
  const getNowDate = () => {
    let stamp = new Date().getTime() + 8 * 60 * 60 * 1000;
    beijingTime.value = new Date(stamp).toISOString().replace(/T/, ' ').replace(/\..+/, '').substring(0, 19);
  }
  
  const historyShow = ref(false)
  const historyChange = ()=> {
    historyShow.value = !historyShow.value;
    console.log(historyShow.value)
  }
  
  //语音合成
  const dubText = ref('')
  const dubVoice = ref('')
  const CreateSpeech = () => {
    Api.Common.PcObjProcess.Do({ functionName: "CreateSpeech", orgCode: "0004", contentData: { isBegin: "1", perCode: dubVoice.value, text: dubText.value } })
      .then(res => {
        console.log(res);
        GetSpeechList('1')
        alert(res.result)
      })
  }
  //获取合成配音列表
  const speechList = ref([])
  const GetSpeechList = (voiceType) => {
    speechList.value = []
    Api.Common.PcObjProcess.Do({ functionName: "GetSpeechList", orgCode: "0004", contentData: { isBegin: "1", voiceType: voiceType } })
      .then(res => {
        let i = 0
        res.result.map(e => {
          e.state = '0'
          e.value = i++
          e.name = e.fileName.split('.')[0]
          e.reName = false
        })
        speechList.value = res.result
        console.log('speechList', speechList.value)
      })
  }
  //获取语音类型
  const voiceTypeList = ref('')
  const voiceTypeFun = (voiceType) => {
    speechStart.value = '请选择'
    speechMid.value = '请选择'
    speechEnd.value = '请选择'
    GetBaseVoiceList(voiceType)
    GetSpeechList(voiceType)
  }
  const GetBaseVoiceList = (voiceType) => {
    Api.Common.PcObjProcess.Do({ functionName: "GetBaseVoiceList", "contentData": { voiceType } })
      .then(res => {
        voiceTypeList.value = res.result
      })
  }
  
  const surNum = ref("");
  const surChange = () => {
    console.log(surNum.value);
  };
  const dubbingShow = ref(false) // 语音弹窗
  const couponShow = ref(false) // 优惠券弹窗
  
  const vipCartList = ref([
    {
      value: "0",
      label: "梦田音乐酒吧品牌卡222NO.123523692154",
    },
    {
      value: "1",
      label: "梦田音乐酒吧品牌卡111NO.123523692154",
    },
  ]);
  const consultActive = ref('') //排队大厅 name:'queue-list'  排队统计 queue-stat  设置queue-set 
  const consultList = ref([ ])
  const tableActive = ref(0)
  
  const getStatusColor = (k)=> {
    switch (k) {
          case 0:
            return 'red-col';
          case 1:
            return 'oreg-col';
          case 2:
            return 'gre-col';
          default:
            return 'default-col'; // 默认颜色
    }
  }
  
  const onChangeTab = (type, k) => {
    switch (type) {
      case 'queue':
        consultActive.value = k
        console.log(consultActive.value)
        break
      case 'table':
        tableActive.value = k
        queueListForm.value.queueSymbol = queueTypeList.value[k].queueSymbol
        GetQueueList(true)
        break
      case 'setup':
        setupTabActive.value = k
        if (k == 0) {
          // dubbingShow.value = true
          // couponShow.value = true
          handleSend()
        } else {
          dubbingShow.value = true
        }
  
        console.log(setupTabActive.value)
        break
    }
  }
  const activeName = ref('first')
  const activeName2 = ref('first')
  const handleClick = (tab, event) => {
    console.log(tab, event)
  }
  const queueSummaryChange = (e) => {
    // console.log(e.index);
    queueSummaryForm.value.beginTime = transformWorkTime(e.index,orgStartTime,orgEndTime)[0]
    queueSummaryForm.value.endTime = transformWorkTime(e.index,orgStartTime,orgEndTime)[1] 
    // console.log('queueSummaryChange:',queueSummaryForm.value.beginTime, queueSummaryForm.value.endTime)
    // switch (e.index) {
    //   case '1':
    //     queueSummaryForm.value.beginTime = dayjs().subtract(1, 'day').startOf('day').format('YYYY-MM-DD')
    //     queueSummaryForm.value.endTime = dayjs().subtract(1, 'day').endOf('day').format('YYYY-MM-DD')
    //     break;
    //   case '0':
    //     queueSummaryForm.value.beginTime = dayjs().startOf('day').format('YYYY-MM-DD')
    //     queueSummaryForm.value.endTime = dayjs().endOf('day').format('YYYY-MM-DD')
    //     break;
    //   case '2':
    //     queueSummaryForm.value.beginTime = dayjs().startOf('week').format('YYYY-MM-DD')
    //     queueSummaryForm.value.endTime = dayjs().endOf('week').format('YYYY-MM-DD')
    //     break;
    //   case '3':
    //     queueSummaryForm.value.beginTime = dayjs().startOf('month').format('YYYY-MM-DD')
    //     queueSummaryForm.value.endTime = dayjs().endOf('month').format('YYYY-MM-DD')
    //     break; 
    // }
    getqueueSummary()
  }
  // -------------------------------------------------- 排队大厅操作 -------------------------------------------------
  const isShowRadio = ref(false)
  const heightLight = ref('0') // 选中显示
  const onConfirmShow = ref(false) // 弹窗提示控制(重打小票)
  const onJumpShow = ref(false) // 弹窗提示控制(插队)
  const printName = ref('')
  const nowIndex = ref('') // 当前位置
  // 单选按钮切换
  const onChangeRadio = (v) => {
    // 重打小票
    printName.value = v.callNo
    nowIndex.value = v.queueIndex
    console.log(v);
    if (heightLight.value == '1') {
      console.log(printName.value);
      onConfirmShow.value = true
    } else if (heightLight.value == '2') {
      // 插队
      onJumpShow.value = true
      jumpForm.value.code = v.code
    }
  
  }
  
  const printActive = ref(false)
  const jumpActive = ref(false)
  
  // 重打小票
  const printTip = (val) => {
    if (!printActive.value) {
      printActive.value = true
      jumpActive.value = false  // 确保只有一个按钮是选中状态
      heightLight.value = '1'
      isShowRadio.value = true
      // controlCode.value = val
      // queueRePrintReceipts()
    } else {
      printActive.value = false
      heightLight.value = ''
      isShowRadio.value = false
    }
  }
  
  // 插队
  const queJump = () => {
    if (!jumpActive.value) {
      jumpActive.value = true
      printActive.value = false  // 确保只有一个按钮是选中状态
      heightLight.value = '2'
      isShowRadio.value = true
    } else {
      jumpActive.value = false
      heightLight.value = ''
      isShowRadio.value = false
    }
  }
  
  // 关闭重打小票选择后清空内容
  const clearForm = () => {
    printActive.value = false
    jumpActive.value = false
    onConfirmShow.value = false
    isShowRadio.value = false
    heightLight.value = 0
    controlCode.value = ''
    onJumpShow.value = false
  }
  const jumpForm = ref({
    code: '',
    jumpIndex: '1'
  })
  // 排号清零
  const queListClear = () => {
    queueClearSymbol.value = queueListForm.value.queueSymbol
    queueClear()
  }
  
  
  // 确认插队
  const onConfirmJump = () => {
    Api.Common.PcObjProcess.Do({ "functionName": "queueJump", "contentData": jumpForm.value })
      .then(res => {
        console.log(res);
        clearForm()
        GetQueueList(true) // 获取当前排队列表
      })
  }
  // 叫号 入座 过号
  const queControl = (val, e) => {
    controlCode.value = val
    seatForm.value.code = val
    console.log(val);
    switch (e.target.dataset.type) {
      case 'call':
        queueCall() // 叫号
        break;
      case 'sit':
        queueSeat() // 入座
        break;
      case 'pass':
        queuePass() // 过号
        break;
  
    }
  }
  // 当前排队页码变化
  const quePageChange = (e) => {
    console.log(e);
    if (!e.target.dataset.type) {
      return
    }
    if (e.target.dataset.type == 'up') {
      queueListForm.value.pageIndex--
  
    } else if (e.target.dataset.type == 'down') {
      queueListForm.value.pageIndex++
    }
  
    // 获取排队列表
    Api.Common.PcObjProcess.Do({ "functionName": "GetQueueList", "orgCode": "0004", "contentData": queueListForm.value })
      .then(res => {
        console.log(res);
        queueListFirst.value = res.topQueue
        saveStore.queFirst = res.topQueue
        if(res.list.length > 4){
            queueListOther.value = res.list.slice(0, 4);
            saveStore.queList = res.list.slice(0, 4);
            queueListOtherAll.value = res.list.slice(4);
        }else{
            queueListOther.value = res.list
            saveStore.queList = res.list
            queueListOtherAll.value = []
        }
        // // queueList.value = res.result
        // // queueListFirst.value = res.result[0]
        // if(queueListForm.value.pageIndex == '1'){
  
        // }else{
        //   queueListOther.value = res.result
        // }
  
      })
  }
  // ------------------------------------------------- 历史记录 --------------------------------------------------
  const recordsOperation = (code, e) => {
    if (!e.target.dataset.type) {
      return
    }
    controlCode.value = code
    switch (e.target.dataset.type) {
      case 'sit':
        seatForm.value.code = code
        reQueue()
        break;
      case 'reLine':
        reQueue()
        break;
      case 'black':
        queueBlock()
        break;
    }
    console.log(code);
    console.log(e.target.dataset.type);
  }
  // 历史记录页码变化
  const recordsPageChange = (e) => {
    if (!e.target.dataset.type) {
      return
    }
    if (e.target.dataset.type == 'up') {
      queueRecordListForm.value.pageIndex--
  
    } else if (e.target.dataset.type == 'down') {
      queueRecordListForm.value.pageIndex++
    }
    getQueueRecordList()
  }
  // 时间修改
  const selectedDateChange = (e) => {
    queueRecordListForm.value.selectedDate = dayjs(e).format('YYYY-MM-DD')
    
  }
  //查询日期
  const handleSearch = ()=> {
    getQueueRecordList(true)
  }
  // ------------------------------------------------ 取号 -------------------------------------------------------
  // 取号操作
  const addQueCall = () => {
    console.log(AddQueueCallForm.value);
    // return
    addQueueCall()
  }
  const focusTarget = ref('到店人数')
  const handleNum = (str) => {
    if (focusTarget.value == '到店人数') {
      AddQueueCallForm.value.peopleNum += str
    } else {
      AddQueueCallForm.value.memberMobile += str
    }
  }
  const handleDelLastNum = () => {
    if (focusTarget.value == '到店人数') {
      AddQueueCallForm.value.peopleNum = AddQueueCallForm.value.peopleNum.slice(0, AddQueueCallForm.value.peopleNum.length - 1);
    } else {
      AddQueueCallForm.value.memberMobile = AddQueueCallForm.value.memberMobile.slice(0, AddQueueCallForm.value.memberMobile.length - 1);
    }
  
  }
  const handleDelNum = () => {
    if (focusTarget.value == '到店人数') {
      AddQueueCallForm.value.peopleNum = ''
    } else {
      AddQueueCallForm.value.memberMobile = ''
    }
  }
  // -------------------------------------------------- 设置 --------------------------------------------------------------
  
  // const options = ref([ {
  //             value: '梦田欢迎你',
  //             label: '梦田欢迎你',
  //           }])
  // const options1 = ref([ {
  //             value: '请你就餐',
  //             label: '请你就餐',
  //           }])
  const setupTabActive = ref(0)
  const setupTabList = ref([
    {
      title: '等位超时送券',
      role:'queue-set-wait'
    },
    {
      title: '自定义语音录音',
      role:'queue-set-record'
    },
  ])
  
  // 是否允许小程序取号
  const isMiniQueue = ref(true)
  const miniQueueChange = (e) => {
    if (e) {
      setupForm.value.isCloseMiniQueue = '1'
    } else {
      setupForm.value.isCloseMiniQueue = '0'
    }
  }
  const speechStartUrl = (val) => {
    console.log(val)
    setupForm.value.startPrompt = val
  }
  const speechMidUrl = (val) => {
    console.log(val)
    setupForm.value.baseVoiceValue = val
  }
  const speechEndUrl = (val) => {
    console.log(val)
    setupForm.value.endPrompt = val
  }
  // 修改设置
  const changeSet = () => {
    console.log(setupForm.value);
    // return
    queueCallSet()
  }
  
  
  // 获取当前排队队列
  const queueListForm = ref({
    queueSymbol: '',
    pageSize: 11,
    pageIndex: 1
  })
  const queueList = ref([]) // 排队队列
  const queueListFirst = ref({}) // 排队列表第一条数据
  const queueListOther = ref([]) // 排队列表其它数据（前四条）
  const queueListOtherAll = ref([]) // 排队列表后面其它数据
  const GetQueueList = (flag) => {
    if (flag) {
      queueListForm.value.pageIndex = 1
    }
    Api.Common.PcObjProcess.Do({ "functionName": "GetQueueList", "contentData": queueListForm.value })
      .then(res => {
        console.log(res);
        queueListFirst.value = res.topQueue
        saveStore.queFirst = res.topQueue
        if(res.list.length > 4){
            queueListOther.value = res.list.slice(0, 4);
            saveStore.queList = res.list.slice(0, 4);
            queueListOtherAll.value = res.list.slice(4);
        }else{
            queueListOther.value = res.list
            saveStore.queList = res.list
            queueListOtherAll.value = []
        }
        
        
        
        
        console.log(saveStore.queList,saveStore.queFirst);
      })
  }
  // 获取排队记录列表
  const queueRecordListForm = ref({
    pageSize: '6',
    pageIndex: '1',
    selectedDate: dayjs().format('YYYY-MM-DD') 
  })
  const queueRecordList = ref([]) // 排队记录
  
  const getQueueRecordList = (flag) => {
    if (flag) {
      queueRecordListForm.value.pageIndex = '1'
    }
    // console.log('selectedDate:',queueRecordListForm.value.selectedDate)
    Api.Common.PcObjProcess.Do({ "functionName": "GetQueueRecordList", "orgCode": "0004", "contentData": queueRecordListForm.value })
      .then(res => {
        console.log(res);
        queueRecordList.value = res.result
      })
  }
  // 获取排队类型列表
  const queueTypeList = ref([])
  const GetQueueTypeList = () => {
    Api.Common.PcObjProcess.Do({ "functionName": "GetQueueTypeList", "orgCode": "0004", "contentData": '' })
      .then(res => {
        console.log(res);
        queueTypeList.value = res.result
      })
  }
  const controlCode = ref('') // 排队编码 
  // 重打小票
  const queueRePrintReceipts = () => {
    Api.Common.PcObjProcess.Do({ "functionName": "QueueRePrintReceipts", "orgCode": "0004", "contentData": { "code": controlCode.value, "ip": ip.value } })
      .then(res => {
        console.log(res);
        ElNotification({
          title: '提示',
          message: res.result,
          type: 'success',
        })
        clearForm()
      })
  }
  // 排队叫号
  const QueueArray = ref([]) // 语音播放数组
  const QueueArrayBack = ref([]) // 语音播放数组备用
  const audioBoxaa = ref(null)
  const queueCall = () => {
    // 
    Api.Common.PcObjProcess.Do({ "functionName": "QueueCall", "orgCode": "0004", "contentData": { "code": controlCode.value } })
      .then(res => {
        console.log(res);
        ElNotification({
          title: '提示',
          message: '叫号成功',
          type: 'success',
        })
        GetQueueList() // 更新页面
        const ht = import.meta.env.VITE_BASE_API.replace('/api/', '')
        console.log(res);
        QueueArray.value = res.callList
        // QueueArray.value = res.callList.map(item => item);
        // QueueArrayBack.value = res.callList.map(item => item);
        callNum.value = res.callNum // 语音播放多少次
        playNum.value = 0
        paySound()
        canCall.value = false // 不能叫号
      })
    return
    if (!canCall.value) {
      ElNotification({
        title: '提示',
        message: '当前已经在叫号中',
        type: 'warning',
      })
      return
    }
  }
  
  const canCall = ref(true) // 是否还可以叫号（要保证两个叫号不能同时进行）
  const callNum = ref('3') // 语音播放多少次
  const callNumNow = ref('1') // 当前播放的次数
  // 监听器 
  watch(() => callNumNow.value, (newValue, oldValue) => {
    canCall.value = false // 不能取号
    if (newValue > callNum.value) {
      canCall.value = true // 播放完毕 可以取号
      return
    }
    setTimeout(function () {
      QueueArray.value = QueueArrayBack.value.concat();
      paySound()
    }, 3000); // 语音播报每一遍多少秒（最后一句话的时间要算进去）
  
  });
  // 语音播放
  const playIndex = ref('')
  const playNum = ref(0)
  const paySound = () => {
    audioBoxaa.value.load()
    playIndex.value = QueueArray.value[playNum.value]
    console.log(playIndex.value, playNum.value)
    setTimeout(() => {
      audioBoxaa.value.play()
      playNum.value++
      audioBoxaa.value.addEventListener('ended', paySound, false);
    }, 100);
  }
  // 重新排队
  const reQueue = () => {
    Api.Common.PcObjProcess.Do({ "functionName": "ReQueue", "orgCode": "0004", "contentData": { "code": controlCode.value } })
      .then(res => {
        console.log(res);
        ElNotification({
          title: '提示',
          message: res.result,
          type: 'success',
        })
        GetQueueList(true)
        getQueueRecordList()
      })
  }
  // 加入黑名单
  const queueBlock = () => {
    Api.Common.PcObjProcess.Do({ "functionName": "QueueBlock", "orgCode": "0004", "contentData": { "code": controlCode.value }, remark: '' })
      .then(res => {
        console.log(res);
        ElNotification({
          title: '提示',
          message: res.result,
          type: 'success',
          // duration: 0,
        })
        getQueueRecordList()
      })
  }
  // 排队入座
  const seatForm = ref({
    code: '', // 排队编码 
    roomCode: '' // 房台编码
  })
  const queueSeat = () => {
    Api.Common.PcObjProcess.Do({ "functionName": "QueueSeat", "orgCode": "0004", "contentData": seatForm.value })
      .then(res => {
        console.log(res);
        ElNotification({
          title: '提示',
          message: res.result,
          type: 'success',
        })
        GetQueueList(true) // 更新页面
        GetQueueTypeList()
        getQueueRecordList()
      })
  }
  // 排队过号
  const queuePass = () => {
    Api.Common.PcObjProcess.Do({ "functionName": "QueuePass", "orgCode": "0004", "contentData": { "code": controlCode.value } })
      .then(res => {
        console.log(res);
        ElNotification({
          title: '提示',
          message: res.result,
          type: 'success',
        })
        GetQueueList(true) // 更新页面
        GetQueueTypeList()
        getQueueRecordList()
      })
  }
  // 排队清零
  const queueClearSymbol = ref('')
  const confirmShow = ref(false) // 排队清零确认弹窗
  const queueClear = () => {
    confirmShow.value = true
  
  }
  const confirmClear = () => {
    Api.Common.PcObjProcess.Do({ "functionName": "QueueClear", "orgCode": "0004", "contentData": { "queueSymbol": queueClearSymbol.value } })
      .then(res => {
        console.log(res);
        ElNotification({
          title: '提示',
          message: res.result,
          type: 'success',
        })
        confirmShow.value = false
        GetQueueList(true) // 更新页面
        GetQueueTypeList()
      })
  }
  // 新增排队取号
  const AddQueueCallForm = ref({
    memberName: '', // 会员名称
    memberMobile: '', // 会员手机号
    peopleNum: '', // 到店人数
    remark: '无限制' // 备注
  })
  
 
  
  //获取ip地址
  const ip = ref("");
  getLocalIPv4()
    .then((ipAddress) => {
      // 在这里处理获取到的 IP 地址
      ip.value = ipAddress;
      console.log("IP 地址:", ip.value);
    })
    .catch((error) => {
      console.error("发生错误:", error);
      // 在这里处理错误情况
    });
  
  console.log(import.meta.env.VITE_BASE_API);
  // version:版本 正式版为 release 体验版为 trial 开发版为 develop
  let version = ref('')
  if(import.meta.env.VITE_BASE_API == 'http://172.18.3.8:8090/api/'){
    version.value = 'develop'
  }
  if(import.meta.env.VITE_BASE_API == 'https://jtmckj.com:4090/api/'){
    version.value = 'trial'
  }
  if(import.meta.env.VITE_BASE_API == 'https://jtmckj.com/api/'){
    version.value = 'release'
  }
  const addQueueCall = () => {
    if (AddQueueCallForm.value.memberMobile != '') {
      if (!validateMobile(AddQueueCallForm.value.memberMobile)) return
    }
    Api.Common.PcObjProcess.Do({ "functionName": "AddQueueCall", "orgCode": "0004", "contentData": { ...AddQueueCallForm.value, "ip": ip.value,"version":version.value } })
      .then(res => {
        ElNotification({
          title: '提示',
          message: res.result,
          type: 'success',
        })
        AddQueueCallForm.value.peopleNum = ''
        AddQueueCallForm.value.memberMobile = ''
        GetQueueList() // 更新页面
        GetQueueTypeList()
      })
  }
  // 获取排队统计
  const queueSummaryForm = ref({
    // beginTime: dayjs().startOf('day').format('YYYY-MM-DD'), // 开始时间
    // endTime: dayjs().endOf('day').format('YYYY-MM-DD')
    beginTime: transformWorkTime('今天',orgStartTime,orgEndTime)[0],
    endTime: transformWorkTime('今天',orgStartTime,orgEndTime)[1]
  })
  const queueSummary = ref({})
  const getqueueSummary = () => {
    Api.Common.PcObjProcess.Do({ "functionName": "QueueSummary", "orgCode": "0004", "contentData": queueSummaryForm.value })
      .then(res => {
        queueSummary.value = res
        console.log(queueSummary.value);
      })
  }
  // 排队呼叫设置
  const setupForm = ref({
    isCloseMiniQueue: '', // 小程序是否可以取号
    code: '', // 编码 
    inHour:'', // 多少小时 - 恶意取号惩罚
    cancelNum:'',// 取消多少次 - 恶意取号惩罚
    lockHour:'', // 锁多少小时 - 恶意取号惩罚
    callMode: '', // 呼叫模式 
    callNum: '', // 呼叫次数 
    voiceType: '', // 语言包类型（测试叫号语音）
    startPrompt: '', // 开始提示语
    endPrompt: '', // 结束提示语 
    state: '', // 状态 
    remark: '', // 备注
    baseVoiceValue: '',
    limitKM:'' // 距离
  })
  // 获取排队呼叫设置
  const getQueueCallSet = () => {
    Api.Common.PcObjProcess.Do({ "functionName": "GetQueueCallSetConfig", "orgCode": "0004", "contentData": {} })
      .then(res => {
        setupForm.value = res
        console.log('排队设置', setupForm.value)
        voiceTypeFun(setupForm.value.voiceType)
        speechStart.value = setupForm.value.startPrompt
        speechMid.value = setupForm.value.baseVoiceValue
        speechEnd.value = setupForm.value.endPrompt
        if (res.isCloseMiniQueue == '0') {
          isMiniQueue.value = false
        } else {
          isMiniQueue.value = true
        }
        console.log('setupForm.value.voiceType', setupForm.value.voiceType)
  
      })
  }
  // 排队呼叫设置修改
  const queueCallSet = () => {
    Api.Common.PcObjProcess.Do({ "functionName": "QueueCallSet", "orgCode": "0004", "contentData": setupForm.value })
      .then(res => {
        console.log(res);
        ElNotification({
          title: '提示',
          message: res.result,
          type: 'success',
        })
      })
  }
  
  //获取语音人员列表
  const personList = ref('')
  const GetSpeechPersonList = () => {
    Api.Common.PcObjProcess.Do({ functionName: "GetSpeechPersonList", orgCode: "0004", contentData: '' })
      .then(res => {
        console.log(res.result);
        personList.value = res.result
        dubVoice.value = res.result[0].value
      })
  }
  
  //删除合成配音
  const DeleteSpeechFile = (fileName) => {
    Api.Common.PcObjProcess.Do({ functionName: "DeleteSpeechFile", orgCode: "0004", contentData: { isBegin: "1", fileName } })
      .then(res => {
        console.log(res.result);
        GetSpeechList('1')
      })
  }
  
  //重命名配音文件
  const ReNameFile = (item) => {
    item.reName = false
    console.log(item)
    if (item.name != item.fileName.split('.')[0]) {
      Api.Common.PcObjProcess.Do({ functionName: "ReNameSpeechFile", contentData: { oldFileName: item.fileName, newFileName: item.name + '.mp3' } })
        .then(res => {
          console.log(res)
          GetSpeechList('1')
        })
    }
  }
  
  //播放
  const audioBox = ref(null);
  const playAudio = (item, index) => {
    // audioBox.value[index].src = item.url
    audioBox.value[index].play()
  }
  const pauseAudio = (item, index) => {
    audioBox.value[index].pause()
  }
  
  //播放状态
  const onPlay = (item) => {
    item.state = '1'
  }
  const onPause = (item) => {
    item.state = '0'
  }
  // ----------------------------------------------------- 初始化 ----------------------------------------------------------
  const onInit = () => {
    // 初始化默认时间 
    queueRecordListForm.value.selectedDate = transformWorkTime('今天',orgStartTime,orgEndTime)[0].substring(0,10) 
  
    GetQueueList(true) // 获取当前排队列表
    getQueueRecordList() // 获取排队记录列表
    GetQueueTypeList() // 获取排队类型列表
    getqueueSummary() // 获取排队统计
    getQueueCallSet() // 获取排队呼叫设置
    getNowDate()
    GetSpeechPersonList()
    // GetSpeechList()
  }
  
  
  
  // -----------------------赠金币/券-------------------
  let SendVisible = ref(false)
  const SendRef = ref()
  const handleSend = (name) => {
    SendVisible.value = true
    nextTick(() => {
      SendRef.value.open('queue')
    });
  }
  // 取消表格弹窗
  const emitSendCancel = (params) => {
    console.log(params)
    SendVisible.value = false
  }
  // 提交表格弹窗
  const emitSendSubmit = (params) => {
    console.log(params)
    SendVisible.value = false
  }
  
  
  const initFilter = () => { 
    let localConsultList = [{
      title: '排队大厅',
      name:'queue-list'
    },
    {
      title: '排队统计',
      name:'queue-stat' 
    },
    {
      title: '设置',
      name:'queue-set' 
    }]   
    const roleAll = new Map(ls.get('USER_ROLE_ALL') .map(item => [item.name, item])); 
    consultList.value = localConsultList.filter(item => roleAll.has(item.name))  
    if(consultList.value.length > 0){
      consultActive.value = consultList.value[0].name 
      onInit()  
    }else{
      ElNotification({
        title: '提示',
        message: '当前没有权限访问该页面，请联系管理员',
        type: 'warning',
      })
    }
  }
let searchQue = null
onMounted(() => {
  initFilter()
  searchQue =  setInterval(() => {
    GetQueueList()
  }, 3000);
 
});
onUnmounted(() => {
  clearInterval(searchQue);
})
 
  
  </script>
  
  <style scoped lang="scss">
  @import '@/styles/com_style_input.css';
  .queue-container {
    display: flex;
    align-items: start;
    justify-content: center;
    white-space: nowrap;
    padding: 20px 100px 20px 100px;
    background-color: #f2f2f2;
    height: 100%;
    .queue-left {
      margin-right: 60px;
      min-width: 800px;
      &.spe{
        margin-right:0;
      }
      .queue-left-tabs {
        display: flex;
        align-items: center;
        margin-bottom: 10px;
  
        .queue-tab {
          font-family: Microsoft YaHei;
          font-weight: 400;
          font-size: 18px;
          color: #666666;
          line-height: 18px;
          background: #ffffff;
          border-radius: 8px;
          border: 1px solid #e6e6e6;
          width: 240px;
          text-align: center;
          padding: 21px 0;
          margin-right: 40px;
          cursor: pointer;
  
          &:last-child {
            margin-right: 0;
          }
  
          &.active {
            background: #ffd400;
            border: none;
            color: #212121;
          }
        }
      }
  
      .el-tabs {
        ::v-deep(.el-tabs__nav-wrap) {
          display: flex;
        }
  
        ::v-deep(.el-tabs__header) {
          // margin-bottom: 24px;
        }
  
        ::v-deep(.el-tabs__nav-scroll) {
          // display: flex;
          flex: 1;
          background: #E6E6E6;
          border-radius: 8px;
        }
  
        ::v-deep(.el-tabs__nav) {
          width: 100%;
          padding: 0 169px;
          display: flex;
          align-items: center;
          justify-content: space-between;
        }
  
        ::v-deep(.el-tabs__item) {
          font-family: Microsoft YaHei;
          font-weight: 400;
          font-size: 16px;
          color: #212121;
          line-height: 16px;
        }
  
        ::v-deep(.el-tabs__active-bar) {
          width: 22px !important;
          left: 16px;
          bottom: 4px;
          background-color: #FF6A00;
          height: 2px !important;
        }
  
        &.spe {
          ::v-deep(.el-tabs__nav) {
            width: 100%;
            padding: 0 86px;
            display: flex;
            align-items: center;
            justify-content: space-between;
          }
  
          ::v-deep(.el-tabs__active-bar) {
            width: 22px !important;
            left: 5px;
            bottom: 4px;
            background-color: #FF6A00;
            height: 2px !important;
          }
        }
  
        ::v-deep(.el-tabs__item.is-active) {
          color: #FF6A00;
        }
        .tab-quebgf {
           min-height: 763px;
            background: #fff;
            padding-top: 20px;
            border-radius:8px ;
           .history-btn {
            cursor: pointer;
            width: 100px;
            height: 40px;
            background: #E6E6E6;
            border-radius: 8px;
            text-align: center;
            line-height: 40px;
            font-size: 16px;
            color: #666666;
           }
           .history-rutern {
            background: #FFE566;
           color: #212121;
           }
          }
        .tab-queue {
           padding-right: 20px;
           padding-left: 20px;
           .tab-queue-aicnet {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding-bottom: 16px;
            border-bottom: 1px solid #E6E6E6;
            margin-bottom: 20px;
           }
          .tab-queue-top {
            display: flex;
            align-items: center;
            // justify-content: space-between;
            // border-bottom: 1px solid #E6E6E6;
            padding: 0px 40px 0px 0px;
            // margin-bottom: 21px;
  
            .top-item {
              font-family: Microsoft YaHei;
              font-weight: 400;
              font-size: 16px;
              color: #666666;
              line-height: 16px;
              cursor: pointer;
              margin-right: 40px;
              &.active {
                color: #FF6A00;
              }
            }
          }
  
          .tab-queue-nav {
            // padding: 20px 40px 0  60px;
            background: #FFFFFF;
            border-radius: 8px;
            // margin-bottom: 20px;
            .nav-upper {
              display: flex;
              align-items: center;
              justify-content: space-between;
              margin-bottom: 20px;
  
              .nav-upper-left {
                display: flex;
                align-items: center;
  
                .left-nowPeo {
                  font-family: Microsoft YaHei;
                  font-weight: bold;
                  font-size: 24px;
                  color: #212121;
                  line-height: 24px;
                  margin-right: 20px;
                }
  
                .left-table {
                  font-family: Microsoft YaHei;
                  font-weight: 400;
                  font-size: 16px;
                  color: #009900;
                  line-height: 16px;
                }
              }
  
              .nav-upper-right {
                display: flex;
  
                .right-button {
                  width: 120px;
                  height: 48px;
                  font-family: Microsoft YaHei;
                  font-weight: 400;
                  font-size: 16px;
                  color: #212121;
                  line-height: 48px;
                  text-align: center;
                  border-radius: 8px;
                  border: 1px solid #999999;
                  margin-left: 20px;
                  cursor: pointer;
  
                  &.active {
                    color: #FF6A00;
                    border: 1px solid #FF6A00;
                  }
                }
              }
            }
  
            .nav-below {
              background: #FFF7CC;
              border-radius: 8px;
              padding: 10px 20px 10px 32px;
              display: flex;
              align-items: center;
              justify-content: space-between;
              position: relative;
              .nav-below-main{
                position: absolute;
                left: 0;
                top: 0;
                width: 40px;
                height: 24px;
                background-image: url('https://oss.jtmckj.com/pc/images/queue/i_icon_mian.png');
                background-position: center;
                background-size: cover;
  
              }
              .below-value {
                width: 120px;
                font-family: Microsoft YaHei;
                font-weight: bold;
                font-size: 48px;
                color: #212121;
                line-height: 48px;
              }
            
              .below-center {
                width: 200px;
                height: 60px;
                background: #FFFBE3;
                border-radius: 4px;
                padding: 10px 0 5px 0px;
  
                .center-top {
                  display: flex;
                  align-items: center;
                  margin-bottom: 10px;
  
                  .people-num {
                    margin-left: 10px;
                    font-family: Microsoft YaHei;
                    font-weight: 400;
                    font-size: 16px;
                    color: #212121;
                    line-height: 16px;
                  }
  
                  .table-style {
                    width: 32px;
                    height: 20px;
                    font-family: Microsoft YaHei;
                    font-weight: 400;
                    font-size: 12px;
                    color: #FFFEFE;
                    text-align: center;
                    line-height: 20px;
                    background: #FF3333;
                    border-radius: 4px;
                  }
                }
  
                .center-bottom {
                  overflow: hidden;
                  .state {
                    margin-left: 20px;
                    font-family: Microsoft YaHei;
                    font-weight: 400;
                    font-size: 14px;
                    color: #FF6A00;
                    line-height: 14px;
                  }
                }
              }
  
              .below-right {
                display: flex;
                align-items: center;
  
                .below-button {
                  font-family: Microsoft YaHei;
                  font-weight: 400;
                  font-size: 20px;
                  color: #212121;
                  line-height: 20px;
                  border-radius: 8px;
                  padding: 10px 21px;
                  cursor: pointer;
  
                  &.spe1 {
                    background: #FFE566;
                  }
  
                  &.spe2 {
                    background: #FFA666;
                    margin-left: 20px;
                  }
  
                  &.spe3 {
                    background: #E6E6E6;
                    margin-left: 20px;
                  }
                }
              }
            }
          }
  
          .tab-queue-main {
            background: #FFFFFF;
            border-radius: 8px;
            padding-bottom: 22px;
            &.spe{
                padding-bottom: 10px;
            }
            &.last{
                padding-bottom: 0px;
            }
            .queue-main-top {
              display: flex;
              align-items: center;
              justify-content: space-between;
              padding: 22px 40px 22px 60px;
              &.spe{
                    padding: 0px 40px 0px 60px;
                }
  
              .top-left {
                font-family: Microsoft YaHei;
                font-weight: bold;
                font-size: 24px;
                color: #212121;
                line-height: 24px;
              }
  
              .top-right {
                display: flex;
                align-items: center;
                font-family: Microsoft YaHei;
                font-weight: 400;
                font-size: 16px;
                line-height: 16px;
                color: #00AAFF;
  
                .top-right-up {
                  padding: 12px 16px;
                  // margin-right: 20px;
                  cursor: pointer;
                  background: #F2F2F2;
                  border-radius: 8px;
                  &.spe{
                    padding: 18px 55px;
                  }
                }
  
                .top-right-down {
                  margin-left: 20px;
                  padding: 12px 16px;
                  cursor: pointer;
                  background: #F2F2F2;
                  border-radius: 8px;
                  &.spe{
                    padding: 18px 55px;
                  }
                }
              }
            }
  
            .queue-main-center {
                padding-bottom: 10px;
              .center-item {
                padding: 0 40px 0 60px;
                position: relative;
                margin-bottom: 21px;
                &.center-item{
                    margin-bottom: 18px;
                }
                .item-number {
                  position: absolute;
                  left: 27px;
                  top: 22px;
                  font-family: Microsoft YaHei;
                  font-weight: 400;
                  font-size: 20px;
                  color: #FF3333;
                  line-height: 36px;
                  padding-right: 27px;
                }
  
                .nav-below {
                  background: #F2F2F2;
                  border-radius: 8px;
                  padding: 10px 20px 10px 32px;
                  display: flex;
                  align-items: center;
                  justify-content: space-between;
                  position: relative;
                  .nav-below-main{
                    position: absolute;
                    left: 0;
                    top: 0;
                    width: 40px;
                    height: 24px;
                    background-image: url('https://oss.jtmckj.com/pc/images/queue/i_icon_mian.png');
                    background-position: center;
                    background-size: cover;
  
                  }
                  .below-value {
                    width: 120px;
                    font-family: Microsoft YaHei;
                    font-weight: bold;
                    font-size: 48px;
                    color: #212121;
                    line-height: 48px;
                  }
  
                  .below-center {
                    width: 200px;
                    height: 60px;
                    background: #FFFBE3;
                    border-radius: 4px;
                    padding: 10px 0 5px 0px;
  
                    .center-top {
                      display: flex;
                      align-items: center;
                      margin-bottom: 10px;
  
                      .people-num {
                        margin-left: 10px;
                        font-family: Microsoft YaHei;
                        font-weight: 400;
                        font-size: 16px;
                        color: #212121;
                        line-height: 16px;
                      }
  
                      .table-style {
                        width: 32px;
                        height: 20px;
                        font-family: Microsoft YaHei;
                        font-weight: 400;
                        font-size: 12px;
                        color: #FFFEFE;
                        text-align: center;
                        line-height: 20px;
                        background: #FF3333;
                        border-radius: 4px;
                      }
                    }
  
                    .center-bottom {
                      overflow: hidden;
                      .state {
                        margin-left: 20px;
                        font-family: Microsoft YaHei;
                        font-weight: 400;
                        font-size: 14px;
                        color: #FF6A00;
                        line-height: 14px;
                      }
                    }
                  }
  
                  .below-right {
                    display: flex;
                    align-items: center;
  
                    .below-button {
                      font-family: Microsoft YaHei;
                      font-weight: 400;
                      font-size: 20px;
                      color: #212121;
                      line-height: 20px;
                      border-radius: 8px;
                      padding: 10px 21px;
                      cursor: pointer;
  
                      &.spe1 {
                        background: #FFE566;
                      }
  
                      &.spe2 {
                        background: #FFA666;
                        margin-left: 20px;
                      }
  
                      &.spe3 {
                        background: #E6E6E6;
                        margin-left: 20px;
                      }
                    }
                  }
  
                  .below-radio {
                    width: 20px;
                    height: 20px;
                    position: absolute;
                    right: -30px;
  
                    ::v-deep(.el-radio__inner) {
                      // margin-left: 20px;
                      width: 20px;
                      height: 20px;
                      border-color: #ff6a00;
                    }
  
                    ::v-deep(.el-radio__input.is-checked .el-radio__inner) {
                      border-color: #ff6a00;
                      /* 选中状态边框颜色 */
                      background-color: #ffffff;
                      /* 选中状态背景颜色 */
                    }
  
                    ::v-deep(.el-radio__inner:after) {
                      background-color: #ff6a00;
                      width: 8px;
                      height: 8px;
                    }
  
                    ::v-deep(.el-radio__label) {
                      display: none;
                      font-family: Microsoft YaHei;
                      font-weight: 400;
                      font-size: 16px;
                      color: #666666;
                      line-height: 16px;
                    }
                  }
                }
              }
              .center-item:nth-last-child(1)  {
                 margin-bottom: 0;
              }
            }
          }
        }
  
        .tab-record {
          .tab-record-top {
            margin-top: 20px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 20px;
  
            .tab-record-data {
              display: flex;
              align-items: center;
  
              .data-title {
                font-family: Microsoft YaHei;
                font-weight: 400;
                font-size: 16px;
                color: #212121;
                line-height: 16px;
              }
            }
  
            .tab-record-btn {
              margin-right: 60px;
              display: flex;
              align-items: center;
              font-family: Microsoft YaHei;
              font-weight: 400;
              font-size: 16px;
              color: #00AAFF;
              line-height: 16px;
  
              .btn-up {
                background: #F2F2F2;
                border-radius: 8px;
                padding: 12px 15px;
                color: #00AAFF;
                cursor: pointer;
              }
  
              .btn-down {
                background: #F2F2F2;
                border-radius: 8px;
                padding: 12px 15px;
                margin-left: 20px;
                color: #00AAFF;
                cursor: pointer;
              }
            }
  
            ::v-deep(.el-date-editor.el-input) {
              width: 400px;
              height: 48px;
            }
          }
  
          .tab-record-main {
            background: #FFFFFF;
            border-radius: 8px;
            padding: 20px 0 1px;
  
            .center-item {
              padding: 0 60px;
              position: relative;
              margin-bottom: 20px;
  
              .item-number {
                position: absolute;
                left: 27px;
                top: 22px;
                font-family: Microsoft YaHei;
                font-weight: 400;
                font-size: 20px;
                color: #FF3333;
                line-height: 36px;
                padding-right: 27px;
              }
  
              .nav-below {
                background: #F2F2F2;
                border-radius: 8px;
                padding: 10px 20px 10px 32px;
                display: flex;
                align-items: center;
                justify-content: space-between;
  
                .below-value {
                  width: 140px;
                  font-family: Microsoft YaHei;
                  font-weight: bold;
                  font-size: 48px;
                  color: #212121;
                  line-height: 48px;
                }
  
                .below-center {
                  width: 200px;
                  height: 60px;
                  background: #FFFBE3;
                  border-radius: 4px;
                  padding: 10px 0 5px 16px;
  
                  .center-top {
                    display: flex;
                    align-items: center;
                    margin-bottom: 10px;
  
                    .people-num {
                      margin-left: 10px;
                      font-family: Microsoft YaHei;
                      font-weight: 400;
                      font-size: 16px;
                      color: #212121;
                      line-height: 16px;
                    }
  
                    .table-style {
                      width: 32px;
                      height: 20px;
                      font-family: Microsoft YaHei;
                      font-weight: 400;
                      font-size: 12px;
                      color: #FFFEFE;
                      text-align: center;
                      line-height: 20px;
                      background: #FF3333;
                      border-radius: 4px;
                    }
                  }
  
                  .center-bottom {
                    overflow: hidden;
                    .state {
                      margin-left:10px;
                      font-family: Microsoft YaHei;
                      font-weight: 400;
                      font-size: 14px;
                      color: #FF6A00;
                      line-height: 14px;
                    }
                  }
                }
  
                .below-right {
                  display: flex;
                  align-items: center;
  
                  .below-button {
                    font-family: Microsoft YaHei;
                    font-weight: 400;
                    font-size: 20px;
                    color: #212121;
                    line-height: 20px;
                    border-radius: 8px;
                    padding: 10px 21px;
                    cursor: pointer;
  
                    &.spe1 {
                      background: #FFE566;
                    }
  
                    &.spe2 {
                      background: #FFA666;
                      margin-left: 20px;
                    }
  
                    &.spe3 {
                      background: #E6E6E6;
                      margin-left: 20px;
                    }
                  }
                }
              }
            }
          }
        }
  
        .tab-last {
          background: #FFFFFF;
          border-radius: 8px;
          padding: 30px 60px;
          min-height: 723px;
  
          .tab-last-top {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding-bottom: 29px;
            border-bottom: 1px solid #E5E5E5;
  
            .top-left {
              display: flex;
              align-items: center;
  
              .left-title {
                font-family: Microsoft YaHei;
                font-weight: 400;
                font-size: 20px;
                color: #212121;
                line-height: 20px;
                margin-right: 58px
              }
            }
  
            .top-right {
              font-family: Microsoft YaHei;
              font-weight: 400;
              font-size: 16px;
              color: #212121;
              line-height: 16px;
            }
          }
  
          .tab-last-main {
            .main-title {
              display: flex;
              align-items: center;
              padding: 20px 0;
  
              .main-title-item {
                width: 20%;
                text-align: center;
                font-family: Microsoft YaHei;
                font-weight: 400;
                font-size: 16px;
                color: #666666;
                line-height: 16px;
              }
            }
  
            .main-value {
  
              // display: flex;
              // align-items: center;
              .main-value-item {
                display: flex;
                align-items: center;
                width: 100%;
                padding: 17px 0;
  
                &.odd {
                  background: #F2F2F2;
                  border-radius: 8px;
                }
  
                .item {
                  width: 20%;
                  text-align: center;
                  font-family: Microsoft YaHei;
                  font-weight: 400;
                  font-size: 16px;
                  color: #212121;
                  line-height: 16px;
                }
              }
            }
          }
        }
      }
  
      .queue-left-setup {
        background: #FFFFFF;
        border-radius: 8px;
        padding: 29px 28px 49px 28px;
        .setup-top {
          font-family: Microsoft YaHei;
          font-weight: 400;
          font-size: 20px;
          color: #212121;
          line-height: 20px;
          padding-bottom: 30px;
          border-bottom: 1px solid #E5E5E5;
        }
  
        .setup-main {
          padding-top: 14px;
          padding-bottom: 10px;
  
          .setup-main-item {
            display: flex;
            align-items: center;
            padding-bottom: 30px;
  
            .item-left {
              font-family: Microsoft YaHei;
              font-weight: 400;
              font-size: 16px;
              color: #212121;
              line-height: 16px;
              width: 160px;
              text-align: right;
              // float: left;
            }
  
            .item-center {
              width: 62px;
            }
  
            .item-take {
              display: flex;
              align-items: center;
              font-family: Microsoft YaHei;
              font-weight: 400;
              font-size: 14px;
              color: #999999;
              line-height: 14px;
              .right-take-title {
                padding: 0 19px 0 11px;
              }
            }
            .item-distance{
                font-family: Microsoft YaHei;
                font-weight: 400;
                font-size: 14px;
                color: #999999;
                line-height: 14px;
                ::v-deep(.el-input){
                  width: 60px;
                  height: 40px;
                  background: #F9F9F9;
                  border-radius: 8px;
                }
                ::v-deep(.el-input__wrapper){
                  width: 60px;
                  height: 40px;
                  background: #F9F9F9;
                  border-radius: 8px;
                }
                ::v-deep(.el-input__inner ){
                  width: 60px;
                  height: 40px;
                  padding-left: 10px;
                  background: #F9F9F9;
                  border-radius: 8px;
                }
                :deep input::-webkit-inner-spin-button{
                    -webkit-appearance: none !important;
                }
               
              }
            .item-right {
              display: flex;
              align-items: center;
            }
  
            ::v-deep(.el-select__wrapper) {
              width: 460px;
              height: 48px;
              background: #F9F9F9;
              border-radius: 8px;
            }
          }
  
          .setup-main-footer {
            display: flex;
            align-items: center;
            padding-top: 10px;
  
            // justify-content: center;
            .footer-btn-back {
              font-family: Microsoft YaHei;
              font-weight: 400;
              font-size: 24px;
              color: #FF6A00;
              line-height: 24px;
              background: #FFFFFF;
              border-radius: 8px;
              border: 1px solid #FF6A00;
              padding: 18px 55px;
              margin-right: 36px;
              margin-left: 220px;
              cursor: pointer;
            }
  
            .footer-btn-save {
              font-family: Microsoft YaHei;
              font-weight: 400;
              font-size: 24px;
              color: #FFFFFF;
              line-height: 24px;
              background: #FF6A00;
              border-radius: 8px;
              padding: 18px 55px;
              cursor: pointer;
            }
          }
        }
  
        .setup-footer {
          .footer-title {
            font-family: Microsoft YaHei;
            font-weight: 400;
            font-size: 20px;
            color: #212121;
            line-height: 20px;
            padding-bottom: 30px;
            border-bottom: 1px solid #E5E5E5;
            margin-bottom: 21px
          }
  
          .footer-value {
            display: flex;
            align-items: center;
            justify-content: flex-start;
  
            .footer-value-tab {
              width: 158px;
              height: 48px;
              background: #FFD400;
              border-radius: 8px;
              font-family: Microsoft YaHei;
              font-weight: 400;
              font-size: 16px;
              color: #212121;
              line-height: 48px;
              cursor: pointer;
              margin-right: 16px;
              text-align: center;
              // &.active{
              //   color: #FF6A00;
              //   border-radius: 8px;
              //   border: 1px solid #FF6A00;
              // }
            }
          }
        }
  
        ::v-deep(.el-switch__core) {
          background: #999999;
          border-color: #999999;
        }
  
        ::v-deep(.el-switch.is-checked .el-switch__core) {
          background-color: #ff6a00;
          border-color: #ff6a00;
        }
  
        ::v-deep(.el-radio__inner) {
          // margin-left: 20px;
          width: 20px;
          height: 20px
        }
  
        ::v-deep(.el-radio__input.is-checked .el-radio__inner) {
          border-color: #ff6a00;
          /* 选中状态边框颜色 */
          background-color: #ffffff;
          /* 选中状态背景颜色 */
        }
  
        ::v-deep(.el-radio__inner:after) {
          background-color: #ff6a00;
          width: 8px;
          height: 8px;
        }
  
        ::v-deep(.el-radio__label) {
          font-family: Microsoft YaHei;
          font-weight: 400;
          font-size: 16px;
          color: #666666;
          line-height: 16px;
        }
      }
    }
  
    .queue-right {
  
      background: #FFFFFF;
      border-radius: 8px;
      padding: 40px 60px;
  
      .queue-right-title {
        font-family: Microsoft YaHei;
        font-weight: bold;
        font-size: 24px;
        color: #212121;
        line-height: 24px;
        padding-bottom: 47px;
      }
  
      .queue-right-people {
        display: flex;
        align-items: center;
        padding-bottom: 20px;
  
        ::v-deep(.el-input__wrapper) {
          height: 48px;
          font-family: Microsoft YaHei;
          font-weight: 400;
          font-size: 16px;
          color: #999999;
          line-height: 16px;
          padding-left: 20px;
        }
  
        .people-num {
          font-family: Microsoft YaHei;
          font-weight: 400;
          font-size: 16px;
          color: #212121;
          line-height: 16px;
        }
      }
  
      .queue-right-mobile {
        display: flex;
        align-items: center;
  
        ::v-deep(.el-input__wrapper) {
          height: 48px;
          font-family: Microsoft YaHei;
          font-weight: 400;
          font-size: 16px;
          color: #999999;
          line-height: 16px;
          padding-left: 20px;
        }
  
        .mobile {
          font-family: Microsoft YaHei;
          font-weight: 400;
          font-size: 16px;
          color: #212121;
          line-height: 16px;
        }
  
      }
  
  
      .queue-right-ask {
        display: flex;
        align-items: center;
        padding: 34px 0 62px 87px;
  
        .ask-title {
          font-family: Microsoft YaHei;
          font-weight: 400;
          font-size: 16px;
          color: #212121;
          line-height: 16px;
        }
      }
  
      .queue-right-btn {
        margin-bottom: 64px;
  
        .btn-items {
          display: flex;
          align-items: center;
          justify-content: space-between;
          margin-bottom: 20px;
  
          .item {
            width: 120px;
            height: 96px;
            text-align: center;
            background: #E6E6E6;
            border-radius: 8px;
            font-family: Microsoft YaHei;
            font-weight: 400;
            font-size: 32px;
            color: #212121;
            line-height: 96px;
            margin-right: 20px;
  
            &.spe {
              background-image: url('https://oss.jtmckj.com/pc/images/queue/i_btn_del.png');
              background-size: 52px 40px;
              background-repeat: no-repeat;
              background-position: center;
            }
          }
        }
      }
  
      .queue-right-take {
        background: #FF6A00;
        border-radius: 8px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        font-size: 24px;
        color: #FFFFFF;
        line-height: 24px;
        padding: 19px 0;
        text-align: center;
        cursor: pointer;
      }
  
      ::v-deep(.el-radio__inner) {
        // margin-left: 20px;
        width: 20px;
        height: 20px
      }
  
      ::v-deep(.el-radio__input.is-checked .el-radio__inner) {
        border-color: #ff6a00;
        /* 选中状态边框颜色 */
        background-color: #ffffff;
        /* 选中状态背景颜色 */
      }
  
      ::v-deep(.el-radio__inner:after) {
        background-color: #ff6a00;
        width: 8px;
        height: 8px;
      }
  
      ::v-deep(.el-radio__label) {
        font-family: Microsoft YaHei;
        font-weight: 400;
        font-size: 16px;
        color: #666666;
        line-height: 16px;
      }
  
      // ::v-deep(.el-radio__input.is-checked+.el-radio__label){
  
      // }
    }
  }
  
  .confirmPopue {
    .confirmPopue-title {
      text-align: center;
      font-family: Microsoft YaHei;
      font-weight: bold;
      font-size: 24px;
      color: #212121;
      line-height: 24px;
    }
  
    .confirmPopue-center {
      text-align: center;
      font-family: Microsoft YaHei;
      font-weight: 500;
      font-size: 20px;
      color: #212121;
      line-height: 20px;
      padding: 40px 0;
  
      .top-item {
        display: flex;
        align-items: center;
        padding: 0px 40px 20px;
  
        .top-item-title {
          font-family: Microsoft YaHei;
          font-weight: 400;
          font-size: 16px;
          color: #212121;
          line-height: 16px;
          width: 120px;
        }
  
        ::v-deep(.el-select__wrapper) {
          width: 40%;
        }
      }
  
    }
  
    .confirmPopue-input {
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 60px;
  
      .confirmPopue-input-title {
        font-family: Microsoft YaHei;
        font-weight: 400;
        font-size: 18px;
        color: #212121;
        line-height: 18px;
      }
  
      .confirmPopue-input-value {
        width: 268px;
        height: 48px;
        background: #FAFAFA;
        border-radius: 8px;
        padding-left: 12px;
        margin-left: 16px;
      }
  
      .confirmPopue-input-icon {
        font-family: Microsoft YaHei;
        font-weight: 400;
        font-size: 18px;
        color: #212121;
        line-height: 18px;
      }
    }
  
    .popup-btn {
      display: flex;
      align-items: center;
      justify-content: center;
  
      .btn-cancle {
        text-align: center;
        font-family: Microsoft YaHei;
        font-weight: 400;
        font-size: 24px;
        color: #FF6A00;
        line-height: 60px;
        width: 160px;
        height: 60px;
        background: #FFFFFF;
        border-radius: 8px;
        border: 1px solid #FF6A00;
        margin-right: 36px;
        cursor: pointer;
      }
  
      .btn-submit {
        font-family: Microsoft YaHei;
        font-weight: 400;
        font-size: 24px;
        color: #FFFFFF;
        line-height: 60px;
        text-align: center;
        width: 160px;
        height: 60px;
        background: #FF6A00;
        border-radius: 8px;
        cursor: pointer;
      }
    }
  }
  .below-center_bf {
      background: #EBEBEB !important;
  }
  ::v-deep(.couponGift) {
    border-radius: 15px;
    box-sizing: border-box;
    padding: 0 60px;
  
    .el-dialog__header {
      padding: 0;
    }
  
    .el-dialog__footer {
      // padding: 0;
    }
  
    .couponTitle {
      font-size: 20px;
      font-weight: bold;
      color: #212121;
      padding: 20px 0;
      border-bottom: 1px solid #E5E5E5;
    }
  
    .couponForm {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 20px 0;
  
      .formName {
        color: #212121;
        width: 15%;
        text-align: right;
        font-size: 16px;
      }
  
      .formType1 {
        width: 83%;
        display: flex;
        align-items: center;
        justify-content: space-between;
  
        input {
          width: 82%;
          background-color: #F9F9F9;
          font-size: 16px;
          padding: 15px 20px;
          border-radius: 10px;
          box-sizing: border-box;
        }
  
        .formBtn {
          width: 14%;
          text-align: center;
          background-color: #FFE566;
          padding: 15px 0;
          border-radius: 10px;
          font-size: 16px;
          color: #212121;
        }
      }
  
      .formType2 {
        width: 83%;
  
        .el-select__wrapper {
          background: #F9F9F9;
          box-shadow: 0 0 0 1px transparent;
          padding: 17px 20px;
          font-size: 16px;
          border-radius: 10px;
        }
  
        .el-select__wrapper:hover {
          box-shadow: 0 0 0 1px transparent;
        }
  
        .el-select__wrapper.is-focused {
          box-shadow: 0 0 0 0 transparent;
        }
      }
  
      .formType3 {
        width: 83%;
  
        input {
          width: 100%;
          background-color: #F9F9F9;
          font-size: 16px;
          padding: 15px 20px;
          border-radius: 10px;
          box-sizing: border-box;
        }
      }
  
      .formType4 {
        width: 83%;
        display: flex;
        align-items: center;
        justify-content: space-between;
  
        .el-select {
          width: 82%;
  
          .el-select__wrapper {
            background: #F9F9F9;
            box-shadow: 0 0 0 1px transparent;
            padding: 17px 20px;
            font-size: 16px;
            border-radius: 10px;
          }
  
          .el-select__wrapper:hover {
            box-shadow: 0 0 0 1px transparent;
          }
  
          .el-select__wrapper.is-focused {
            box-shadow: 0 0 0 0 transparent;
          }
        }
  
        .formBtn {
          width: 14%;
          text-align: center;
          background-color: #FFE566;
          padding: 15px 0;
          border-radius: 10px;
          font-size: 16px;
          color: #212121;
        }
      }
  
      .formType5 {
        width: 83%;
  
        .Type5 {
          width: 15%;
          display: flex;
          align-items: center;
          justify-content: space-between;
          background: #F9F9F9;
          border-radius: 10px;
          padding: 15px 20px;
          box-sizing: border-box;
  
          input {
            width: 68%;
            font-size: 16px;
          }
  
          div {
            width: 20%;
            box-sizing: border-box;
            font-size: 16px;
          }
        }
      }
    }
  
    .couponDateType1 {
      margin-left: 17%;
      display: flex;
      align-items: center;
  
      .pickerTitle {
        font-size: 16px;
      }
  
      .Picker {
        background-color: #FAFAFA;
        border-radius: 10px;
        padding: 10px 0;
        display: flex;
  
        >span {
          display: block;
          height: 30px;
          line-height: 30px;
          margin-left: 20px;
          font-size: 16px;
        }
  
        .el-input__wrapper {
          margin-left: 10px;
          box-shadow: 0 0 0 1px transparent inset;
          font-size: 16px;
          background-color: #FAFAFA;
        }
      }
  
      // ::v-deep(.el-input__inner){
      //   color: #212121;
      // }
      // ::v-deep(.el-input__wrapper:hover){
      //     box-shadow: 0 0 0 1px transparent inset;
      // }
    }
  
    .couponDateType2 {
      margin-left: 17%;
      display: flex;
      align-items: center;
      justify-content: space-between;
  
      .dateItem {
        display: flex;
        align-items: center;
        color: #212121;
        font-size: 16px;
        margin-right: 60px;
  
        .dateCount {
          display: flex;
          align-items: center;
          border: 1px solid #CCCCCC;
          border-radius: 5px;
          margin-right: 10px;
  
          .btn {
            padding: 13px 0;
            font-size: 18px;
            width: 40px;
            text-align: center;
          }
  
          .count {
            padding: 13px 30px;
            border-left: 1px solid #CCCCCC;
            border-right: 1px solid #CCCCCC;
            font-size: 18px;
          }
        }
      }
    }
  
    .couponUseInfo {
      margin-left: 17%;
      display: flex;
      align-items: center;
  
      div {
        width: 150px;
        font-size: 16px;
        color: #212121;
      }
  
      span {
        color: #FF3333;
      }
    }
  }
  
  ::v-deep(.el-radio__inner:hover) {
    border-color: #ff6a00;
  }
  
  ::v-deep(.dubbingMask) {
    border-radius: 15px;
    box-sizing: border-box;
    padding: 0 60px;
    box-sizing: border-box;
  
    .el-dialog__header {
      padding: 0;
    }
  
    .dubbingTitle {
      font-size: 20px;
      font-weight: bold;
      color: #212121;
      padding: 30px 0;
      border-bottom: 1px solid #E5E5E5;
    }
  
    .dubbingContent {
      width: 60%;
      margin: auto;
      font-size: 16px;
      color: #212121;
  
      .minTitle {
        font-size: 18px;
        font-weight: bold;
        padding-top: 20px;
        padding-bottom: 10px;
      }
  
      .rule {
        line-height: 1.6;
        text-indent: 16px;
      }
  
      textarea {
        line-height: 1.6;
        font-size: 16px;
        background-color: #F9F9F9;
        border-radius: 10px;
        box-sizing: border-box;
        padding: 15px 20px;
        resize: none;
        width: 100%;
      }
  
      .changeTitle {
        cursor: pointer;
        background-color: #FFD400;
        text-align: center;
        margin: 25px 0;
        padding: 13px 0;
        border-radius: 10px;
        font-size: 18px;
      }
  
      .dubbingTabTop {
        display: flex;
        align-items: center;
        background-color: #F9F9F9;
        border-radius: 10px;
        padding: 15px 0;
  
        div {
          font-size: 14px;
          text-align: center;
          color: #666666;
        }
  
        div:nth-child(1) {
          width: 60%;
        }
  
        div:nth-child(2) {
          width: 40%;
        }
      }
  
      .dubbingTab {
        display: flex;
        align-items: center;
        padding: 10px 0;
  
        input {
          width: 60%;
          font-size: 14px;
          text-align: center;
          color: #666666;
          padding: 5px 0;
        }
  
        .dubbingName {
          background-color: #F2F2F2;
          border-radius: 5px;
        }
  
        .dubbingMenu {
          width: 40%;
          font-size: 14px;
          text-align: center;
          color: #666666;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
          display: flex;
          align-items: center;
  
          span {
            display: block;
            width: 33.33333%;
            color: #00AAFF;
            cursor: pointer;
            text-align: center;
          }
        }
      }
    }
  }
  
  
  .dialog-footer {
    display: flex;
    justify-content: end;
    padding-bottom: 20px;
  
    .el-button {
      width: 160px;
      height: 60px;
      font-size: 26px;
      border-color: #FF6A00;
      color: #FF6A00;
      border-radius: 10px;
      background-color: #fff;
    }
  
    .el-button:nth-child(2) {
      background-color: #FF6A00;
      color: #fff;
    }
  
    .el-button:hover {
      background-color: none;
    }
  
    // .el-button:hover{
    //     background-color: #FF6A00;
    //     color: #fff;
    // }
    .el-button+.el-button {
      margin-left: 30px;
    }
  }
  .red-col {
    color: #FF3333 !important;
  }
  .oreg-col {
    color: #FF6A00 !important;
  }
  .gre-col {
    color: #00A341 !important;
  }
  .default-col {
    color: #212121 !important;
  }
  ::v-deep .item-distance .el-input__wrapper {
    border: none !important;
  }
  .action-btn-box {
      
      display: flex;
      justify-content: space-between;
  
      button {
        width: 120px;
        height: 50px;
        line-height: 50px;
        background: #FFE566;
        border-radius: 8px;
        border: 0;
        font-size: 16px;
        color: #212121;
      }
  
      .reset-btn {
        background: #E6E6E6;
        color: #666666;
      }
    }
    ::v-deep .ke_date-picker .el-input {
      width: 250px !important;
      margin-right: 20px;
    }
  </style>
  